<template>
	<!-- 导航组 -->
	<view class="diy-navBar" :style="[{'background': background},{padding: itemStyle.paddingTop +'px '+'0'}]">
		<!-- <view class="data-list" :class="['avg-sm-'+itemStyle.rowsNum]">
			<view class="item-nav" v-for="dataItem in dataList" :key="dataItem.goods_id">
				<view class="nav-to" @tap="menuClick" :data-url="dataItem.linkUrl">
					<view class="item-image">
						<image mode="widthFix" :src="dataItem.imgUrl"></image>
					</view>
					<view class="item-text f-28 onelist-hidden" :style="[{'color': color}]">{{ dataItem.text }}</view>
				</view>
			</view>
		</view> -->
		<view class="diy-textbutton" style="padding:4px 5px;">
			<view class="diy-textbutton-item" v-for="dataItem in dataList" :style="{color: dataItem.color}"
			@tap="menuClick(dataItem.linkUrl)">{{dataItem.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			background() {
				return this.itemStyle.background;
			},
			color() {
				return this.itemStyle.color;
			}
		},
		props: {
			// itemIndex:{},
			itemStyle: {},
			params: {},
			dataList: {}
		},
		methods: {
			//跳转
			menuClick(e) {
				let url = e;
				
				if (url == '') {
					return
				}else if(url.substring(0,4) == 'page'){
					return this.navigationTo({
					//只能跳转到程序内页面
					url: url
					});
				}else{
					return this.openBrowser(url)
				}
			},
		}
	}
</script>
<style>
	/* common.wxss */
	@import url("../../utils/common.scss");

	/* 导航组 */

	.diy-navBar .data-list::after {
		clear: both;
		content: " ";
		display: table;
	}

	.diy-navBar .item-nav {
		float: left;
		margin: 20upx 0;
		text-align: center;
	}

	.diy-navBar .item-nav .item-image {
		margin-bottom: 8upx;
		font-size: 0;
	}

	.diy-navBar .item-nav image {
		width: 88upx;
		height: 88upx;
	}

	/* 分列布局 */

	.diy-navBar .avg-sm-3>.item-nav {
		width: 33.33333333%;
	}

	.diy-navBar .avg-sm-4>.item-nav {
		width: 25%;
	}

	.diy-navBar .avg-sm-5>.item-nav {
		width: 20%;
	}
	
	  .diy-textbutton{
		height: auto;
	   }
	  .diy-textbutton-item{
		padding: 0.5rem;
		text-align: center;
		position: relative;
		color: #666;
		font-size: 0.75rem;
		width: 1%;
		display: table-cell;
		-webkit-user-select: none;
		-moz-user-select: none;
		transition: background-color 300ms;
		-webkit-transition: background-color 300ms;
		}
</style>
